<template>
  <div class="new-catalog">
    <el-dialog :title="title" :visible="visible" width="70%" @close="cancel">
      <el-form v-show="type !== 'detail'" ref="form" :model="form" label-width="180px" label-suffix="：" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="事项名称" prop="ecName">
              <el-input v-model="form.ecName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事项类型" prop="typeId">
              <el-select v-model="form.typeId" placeholder="请选择类型" clearable>
                <el-option
                  v-for="item in eventTypeList"
                  :label="item.item_text"
                  :value="item.item_value"
                  :key="item.item_value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="行驶层级" prop="hierarchyId">
          <el-checkbox-group v-model="form.hierarchyId" style="display: flex; align-items: center; height: 40px">
            <el-checkbox :label="item.item_value" :key="item.item_value" border v-for="item in exerciseHierarchyList">
              {{ item.item_text }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="行使部门">
          {{ form.departName }}
        </el-form-item>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="是否存在子项">
              <el-radio-group style="display: flex; align-items: center; height: 40px">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否纳入国家目录">
              <el-radio-group style="display: flex; align-items: center; height: 40px">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="计划生效日期">
              <el-date-picker type="date" v-model="form.effectiveDate" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划取消日期">
              <el-date-picker type="date" v-model="form.cancellationDate" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="设定依据">
          <el-input type="textarea" v-model="form.settingBasis"></el-input>
        </el-form-item>
        <!-- <el-form-item label="选择文件">
          <el-input v-model="form.settingBasis"></el-input>
        </el-form-item> -->
      </el-form>
      <el-form v-show="type === 'detail'" label-width="180px" label-suffix="：">
        <el-row>
          <el-col :span="12">
            <el-form-item label="事项名称" prop="ecName">
              {{ form.ecName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事项类型" prop="typeId">
              {{ eventTypeMap[form.typeId] }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="行驶层级" prop="hierarchyId">
              {{ form.hierarchyIdName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行使部门">
              {{ form.departName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划生效日期">
              {{ form.effectiveDate }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划取消日期">
              {{ form.cancellationDate }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="设定依据">
          {{ form.settingBasis }}
        </el-form-item>
      </el-form>
      <div v-show="type !== 'detail'" slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
      <div v-show="type === 'detail'" slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { addCatalogue, editCatalogue } from '@/api/itemManage';
  export default {
    props: {
      spaceItem: {
        type: Object,
        default: () => {}
      },
      selectItem: {
        type: Object,
        default: () => {}
      },
      areaMap: {
        type: Object,
        default: () => {}
      },
      deptId: [String, Number],
      areaCode: String,
      parentEcId: String,
      visible: Boolean,
      title: String,
      eventTypeList: Array,
      eventTypeMap: Object,
      exerciseHierarchyList: Array,
      exerciseHierarchyMap: Object,
      type: String,
      treeData: Array
    },

    data() {
      return {
        form: {
          areaCode: '',
          basicCoding: '',
          cancellationDate: '',
          createTime: '',
          deleteFlag: '',
          deptId: 0,
          ecId: '',
          ecName: '',
          effectiveDate: '',
          hierarchyId: [],
          matterVersion: '',
          parentEcId: '',
          settingBasis: '',
          state: '',
          typeId: ''
        },
        rules: {
          ecName: [
            { required: true, message: '请输入事项名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          typeId: [{ required: true, message: '请选择事项类型', trigger: 'change' }],
          hierarchyId: [{ required: true, message: '请至少选择一个行驶层级', trigger: 'change' }]
        }
      };
    },
    watch: {
      visible(val) {
        if (val) {
          // console.log(this.deptId, this.areaCode, this.parentEcId);
          const item = this.type !== 'new' ? this.selectItem && this.selectItem.data : this.spaceItem;
          const {
            areaCode,
            typeId,
            ecId,
            deptId,
            ecName,
            hierarchyId,
            parentEcId,
            cancellationDate,
            effectiveDate,
            settingBasis
          } = item;
          let departName = this.type !== 'new' ? this.selectItem.departName : this.spaceItem.departName;
          this.form = Object.assign({}, this.form, {
            areaCode,
            deptId,
            typeId,
            ecId,
            ecName,
            departName,
            hierarchyId: hierarchyId || [],
            parentEcId,
            cancellationDate,
            effectiveDate,
            settingBasis
          });
          if (this.type === 'detail' && hierarchyId && hierarchyId.length) {
            const hierarchyIdNames = hierarchyId.map((e) => this.exerciseHierarchyMap[e]);
            this.form.hierarchyIdName = hierarchyIdNames.length && hierarchyIdNames.join('，');
          }
        } else {
          this.reset();
          this.$refs.form.resetFields();
        }
      }
    },
    methods: {
      submit() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const dataForm = { ...this.form };
            if (this.type === 'new') {
              dataForm.areaCode = this.areaCode;
              dataForm.deptId = this.deptId;
              dataForm.parentEcId = this.parentEcId;
            }
            let result = null;
            if (this.type === 'new' || this.type === 'clone') {
              dataForm.ecId = '';
              const { data } = await addCatalogue(dataForm);
              result = data;
            } else {
              const { data } = await editCatalogue(dataForm);
              result = data;
            }
            if (result.success) {
              this.$message.success(
                `${this.type === 'new' ? '新建' : this.type === 'clone' ? '克隆' : '编辑'}目录成功！`
              );
              this.reset();
              this.$emit('cancel', true);
            }
          } else {
            this.$message.error('表单验证有误！');
          }
        });
      },
      cancel() {
        this.$refs.form.resetFields();
        this.$emit('cancel');
      },
      reset() {
        this.form = {
          areaCode: '',
          basicCoding: '',
          cancellationDate: '',
          createTime: '',
          deleteFlag: '',
          ecId: '',
          ecName: '',
          effectiveDate: '',
          hierarchyId: [],
          matterVersion: '',
          parentEcId: '',
          settingBasis: '',
          state: '',
          typeId: ''
        };
      }
    }
  };
</script>

<style lang="scss"></style>
